<!--用户日历页-->
<template>
    <div style="padding: 30px">

        <my-card-title title="个人日历">
            <div class="my-picker-container" slot="actions">
                <div class="my-picker-item"
                     style="border-right: 1px solid #D8DCE6;border-left: none"
                     @click="selectedMonth -= 1">
                    <a-icon type="caret-left"/>
                </div>
                <div class="my-picker-content">
                    {{months[selectedMonth]}} {{selectedYear}}
                </div>
                <div class="my-picker-item"
                     @click="selectedMonth += 1">
                    <a-icon type="caret-right"/>
                </div>
            </div>
            <!--星期栏-->
            <div style="display: flex;flex-direction: column;">
                <div style="display: flex;flex-direction: row;height: 44px;
                        align-items: center">
                    <div v-for="day in weekDays" :key="day"
                         style="flex: 1;font-size: 12px;color: #9EA0A5;
                     display:flex;justify-content: center">
                        {{day}}
                    </div>
                </div>
                <div style="width: 100%;height: 1px;
            background-color: #EAEDF3"></div>
            </div>
            <!--日历格-->
            <div :class="['wrapper',wrapperHandler]">
                <div v-for="(dateCell, index) in allDays" :key="index"
                     :class="['box',cellHandler(dateCell)]" style="position: relative">
                    <!--第一格如果是上个月则加上上个月的月份文字-->
                    <div style="padding: 0 20px;height: min-content">
                        {{index === 0&&dateCell.isPre?
                        months[dateCell.date.getMonth()]+' '+ dateCell.date
                        .getDate()
                        :dateCell.date.getDate()}}
                    </div>
                    <!--读取单元格中的事件数据，显示第一个事件 鼠标悬浮气泡-->
                    <a-popover :placement="popPosition" title="Prompt Text"
                               :getPopupContainer="getPopupContainer"
                               v-if="dateCell.data">
                        <template slot="content">
                        </template>
                        <div style="background-color: rgba(22,101,216,.1);
                            display: flex;flex-direction: column;
                            height: min-content;margin-top: 14px;
                            padding: 14px 20px">
                            <!--文本溢出处理-->
                            <div style="color: #1665D8;
                                font-size: 12px;
                                height: min-content;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                word-break: break-all;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp:2;
                                overflow: hidden;">
                                {{dateCell.data[0].title}}
                            </div>
                        </div>
                    </a-popover>
                    <!--超出的事件处理-->
                    <div v-if="dateCell.data && dateCell.data.length > 1"
                         style="padding:0 20px;font-size: 12px;color: #6B6C6F;
                            margin-top: 10px">
                        {{dateCell.data.length - 1}}+ more...
                    </div>
                </div>
            </div>
        </my-card-title>
    </div>
</template>

<script>
    import calendarTool from '@/tools/calendar';
    export default {
        name: 'UserCalen',
        props: {},
        data () {
            return {
                popPosition: 'left',
                // 日历中的事件
                events: [
                    {
                        title: '体育比赛45646456462222222',
                        time: new Date(2019, 0, 1),
                    },
                    {title: '歌唱比赛', time: new Date(2019, 0, 1)},
                    {title: '歌唱比赛', time: new Date()},
                    {title: '歌唱比赛', time: new Date(2019, 1, 1)},
                    {title: '歌唱比赛', time: new Date(2019, 1, 1)},
                    {title: '歌唱比赛', time: new Date(2019, 1, 1)},
                ],
                // 选择的年份
                selectedYear: null,
                // 选择的月份
                selectedMonth: null,
                // 星期数据(以周日开始)
                weekDays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
                // 月份数据
                months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月',
                         '八月', '九月', '十月', '十一月', '十二月'],
            };
        },
        created () {
            // 初始化数据
            const today = new Date();
            this.selectedYear = today.getFullYear();
            this.selectedMonth = today.getMonth();
            const newDate = new Date(2019, 0, 15);
            newDate.setHours(19, 15, 0);
            this.events.push({
                title: '测试',
                time: newDate,
            });
        },
        computed: {
            // 计算日期数组
            allDays () {
                const allDays = calendarTool
                    .createDays(this.selectedYear, this.selectedMonth);
                // 遍历所有日期添加用户事件数据
                for (let i = 0; i < allDays.length; i++) {
                    for (let j = 0; j < this.events.length; j++) {
                        if (calendarTool.isSameDate(
                            allDays[ i ].date, this.events[ j ].time)) {
                            if (!allDays[ i ].data) {
                                allDays[ i ].data = [];
                            }
                            allDays[ i ].data.push(this.events[ j ]);
                        }
                    }
                }
                return allDays;
            },
            // 如果allDays大于35个则增加一行
            wrapperHandler () {
                if (this.allDays.length > 35) {
                    return 'langWrapper';
                }
                return null;
            },
            // 如果单元格对象属于上个月或者下个月则不可选中(css)
            cellHandler () {
                return function (calendarObj) {
                    const result = [];
                    if (calendarObj.isToday) {
                        result.push('today');
                    }
                    if (calendarObj.isPre || calendarObj.isNext) {
                        result.push('notSelect');
                    }
                    return result;
                };
            },
        },
        watch: {
            // 监听月份的改变，若超出12月则加一年，并改为1月
            selectedMonth () {
                if (this.selectedMonth > 11) {
                    this.selectedMonth = 0;
                    this.selectedYear += 1;
                }
                if (this.selectedMonth < 0) {
                    this.selectedMonth = 11;
                    this.selectedYear -= 1;
                }
            },
        },
        methods: {
            getPopupContainer (trigger) {
                return trigger.parentElement;
            },
        },
    };
</script>

<style scoped lang="scss">
    .wrapper {
        flex: 1;
        background: #EAEDF3;
        justify-self: stretch;
        display: grid;
        grid-gap: 1px;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-auto-flow: row;

        &.langWrapper {
            grid-template-rows: repeat(6, 1fr);
        }
    }

    .today {
        background-color: #F4F8FF !important;
    }

    .box {
        display: flex;
        min-height: 140px;
        padding-top: 14px;
        padding-bottom: 14px;
        flex-direction: column;
        background-color: #FFF;
        align-content: stretch;
        color: #3E3F42;

        &.notSelect {
            color: #9EA0A5;
        }
    }

    .my-picker-container {
        height: 38px;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        width: 200px;
        background-color: white;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #D8DCE6;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }

    .my-picker-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        border-left: 1px solid #D8DCE6;
        color: #D8DCE6;
        font-size: 8px;

        &:hover {
            color: #1665D8;
        }
    }

    .my-picker-content {
        flex: 1;
        font-size: 14px;
        display: flex;
        padding: 0 16px;
        flex-direction: row;
        align-items: center;
        line-height: 21px;
    }

</style>
